<template>
    <div>
        <div class="Head" v-if="Head">
            <!-- 仓库名称 -->
            <div class="Cusgory">
                <span style="margin-right: 10px">所属仓库</span>
                <el-select v-model="adi.wId" placeholder="请选择仓库" style="margin-top: 10px">
                    <el-option v-for="item in ck" :key="item.wId" :label="item.name" :value="item.wId"></el-option>
                </el-select>
            </div>
            <!-- 所属客户 -->
            <div class="Cusname">
                <span style="margin-right: 10px">所属客户</span>
                <span>
                    <el-input v-model="adi.belongName" placeholder="请输入归属仓储客户" :disabled="true">
                        <el-button slot="append" @click="dialogTableVisible = true">选择</el-button>
                    </el-input>
                </span>
            </div>
            <div class="Cusname">
                <span class="demonstration">带快捷选项</span>
                <el-date-picker
                    v-model="value2"
                    style="margin-top: 10px; margin-left: 10px; width: 350px"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00','00:00:00']"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    @change="time"
                >
                </el-date-picker>
            </div>

            <!-- 搜索，重置按钮 -->
            <div class="But">
                <el-button type="primary" icon="el-icon-search" @click="Rean()">搜索</el-button>
                <el-button icon="el-icon-refresh">重置</el-button>
            </div>
        </div>
        <!-- 表 -->
        <div class="function" style="margin-top: 10px">
            <div style="float: right">
                <el-tooltip class="item" effect="dark" content="隐藏搜索" placement="top">
                    <el-button icon="el-icon-search" circle @click="Display"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                    <el-button icon="el-icon-refresh" circle></el-button>
                </el-tooltip>
            </div>
        </div>
        <el-table :data="tableData" class="content" :cell-style="rowClass" :header-cell-style="headClass">
                <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
            <el-table-column prop="name" label="客户"></el-table-column>
            <el-table-column prop="wName" label="仓库"></el-table-column>
            <el-table-column prop="name" label="货品名称"></el-table-column>
            <el-table-column prop="number" label="货品编号"></el-table-column>
            <el-table-column prop="spec" label="货品规格"></el-table-column>
            <el-table-column prop="startStock" label="期初数"></el-table-column>
            <el-table-column prop="takeStock" label="入库数量"></el-table-column>
            <el-table-column prop="putStock" label="出库数量"></el-table-column>
            <el-table-column prop="endStock" label="当前库存"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 添加内框 -->
        <el-dialog class="size" title="归属仓储客户选择" :visible.sync="dialogTableVisible">
            <el-table :data="tableDatas" class="biop">
                <el-table-column prop="name" label="名称" width="130"></el-table-column>
                <el-table-column prop="address" label="地址" width="150"></el-table-column>
                <el-table-column prop="address" label="联系人" width="130"></el-table-column>
                <el-table-column prop="phone" label="电话" width="130"></el-table-column>
                <el-table-column prop="fax" label="传真" width="130"></el-table-column>
                <el-table-column prop="callNumber" label="手机" width="130"></el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="Choice(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-bottom: 20px; margin-top: 5px">
                <el-pagination
                    background
                    style="float: right"
                    @size-change="handleSizeChanges"
                    @current-change="handleCurrentChanges"
                    :current-page="pages.pageNum"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pages.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totals"
                >
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listWarehouse, listcustomer, listrepo } from '../../api/user.js';
export default {
    data() {
        return {
            dialogTableVisible: false,
            // 表头隐藏
            Head: true,
            value: '',
            tableData: [],
            tableDatas: [],
            ck: [],
            // 分页
            page: {
                pageSize: 10,
                pageNum: 1
            },
             pages: {
                pageSize: 10,
                pageNum: 1
            },
            total: null,
            totals: null,
            // 添加输入框
            // 添加输入框
            adi: {
                 pageSize: 10,
                pageNum: 1,
                // 地址
                address: null,
                // 类别
                category: null,
                // 条码
                code: null,
                // 联系人
                contacts: null,
                // 名称
                name: null,
                // 手机号码
                phone: null,
                number:null,
            startTime:undefined,
            endTime:undefined,
            time:[]
            },
            // 日期
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value2: ''
        };
    },
    methods: {
        // 表头显示
        Display() {
            this.Head = !this.Head;
        },
        // 表头样式设置
        headClass() {
            return 'text-align: center;background:#F8F8F9;color:#515A6D;';
        },
        // 表格样式设置
        rowClass() {
            return 'text-align: center;';
        },
        // 分页点击
        indexMethod(index) {
            return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page.pageNum = Number(val);
            console.log(`当前页: ${val}`);
        },

        handleSizeChanges(val) {
            this.pages.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
            this.Choice();
        },
        handleCurrentChanges(val) {
            this.pages.pageNum = Number(val);
            console.log(`当前页: ${val}`);
            this.Choice();
        },
        // 
        Rean(){
            listrepo(this.adi).then((res)=>{
                this.tableData=res.rows;
                console.log(res);
            })
        },
        rean() {
            listWarehouse(this.wId).then((res) => {
                this.ck = res.rows;
                console.log(res.rows);
            });
        },
        // 添加内框
        Choice(index) {
            listcustomer(this.pages).then((res) => {
                this.tableDatas = res.rows;
                console.log(res);
                this.adi.belongName = index.name;
                this.adi.belong = index.cId;
                this.dialogTableVisible = false;
            });
            // this.adi.belongName = index.name;
            // this.adi.belong = index.cId;
        },
        // 时间
        time(){
            this.adi.startTime = this.value2[0];
            this.adi.endTime = this.value2[1];
this.adi.time = this.value2
console.log(this.adi.startTime,this.adi.endTime);
        }
    },
    mounted() {
        this.rean();
        this.Choice();
    }
};
</script>

<style scoped>
.Head {
    height: 50px;
}
/* 客户类别 */
.Cusgory {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusgory span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 客户名称 */
.Cusname {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusname span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 搜素，重置按钮 */
.But {
    height: 100%;
    float: left;
}
.But button {
    margin-top: 10px;
}
</style>